*{
    margin: 0;
    padding: 0;
}

img{
    display: block;
}

.details{
    width: 1200px;
    height: 758px;
    margin: 0 auto;
    margin-bottom: 52px;
    margin-top: 78px;

    >.left{
        width: 600px;
        height: 758px;
        float: left;
        position: relative;

        >.imgbox{
            width: 600px;
            height: 600px;
            margin-bottom: 22px;

            >img{
                width: 600px;
                height: 600px;
            }

            >#shade{
                width: 300px;
                height: 300px;
                background: pink;
                position: absolute;
                opacity: 0.3;
                cursor: move;
                display: none;
            }
        }

        >.img{
            width: 600px;
            height: 100px;
            display: flex;
            justify-content: space-between;

            >img{
                width: 100px;
                height: 100px;
                background: red;
            }

            .look{
                width: 98px;
                height: 98px;
                border: 1px solid #2B7DCC;
            }
        }
        
        .showbox{
            position: absolute;
            width: 598px;
            height: 598px;
            left: 600px;
            top: 0;
            display: none;
            overflow: hidden;

            >div{
                width: 800px;
                height: 800px;
                background-size: cover;
            }

            #big{
				width: 800px;
				height: 800px;
                display: none;
                background: green;
                overflow: hidden;
            }
        }

        >.text{
            width: 600px;
            height: 20px;
            margin-top: 16px;
            display: flex;
            justify-content: space-between;

            >div:nth-of-type(1){
                height: 20px;
                line-height: 20px;

                >img{
                    float: left;
                    width: 14px;
                    height: 12px;
                    margin-top: 4px;
                    margin-left: 2px;
                }

                >p{
                    float: left; 
                    margin-left: 8px;
                    font-size:14px;
                    color: #333;
                    line-height:20px;
                }

                >span{
                    float: left;
                    display: block;
                    font-size:12px;
                    color: #666;
                    line-height:20px;
                    margin-left: 19px;
                }
            }

            >div:nth-of-type(2){
                height: 20px;
                line-height: 20px;

                >img{
                    float: left;
                    width: 12px;
                    height: 10px;
                    margin-top: 5px;
                    margin-right: 5px;
                }

                >p{
                    float: left;
                    font-size:14px;
                    color:#D0021B;
                    line-height:20px;
                }
            }
        }
    }

    >.right{
        width: 557px;
        float: right;

        >.title{
            margin-bottom: 15px;

            >div{
                width: 557px;
                height: 31px;
                line-height: 31px;

                >div{
                    float: left;
                    width: 62px;
                    height: 26px;
                    margin-top: 3px;
                    border-radius: 8px 0 8px 0;
                    background-image: linear-gradient(157deg,
                        #A6DF33 0%,
                        #91BB3E 100%);
                    color: #FFF;
                    font-size: 14px;
                    font-weight: bold;
                    text-align: center;
                }

                >p{
                    float: left;
                    margin-left: 10px;
                    font-size:24px;
                    font-weight:bold;
                    color:#333;
                }
            }

            >p{
                height:19px;
                font-size:14px;
                color:#D0021B;
                line-height:19px;
                margin: 14px 0;
            }

            >span{
                height:19px;
                font-size:14px;
                color: #13479D;
                line-height:19px;
                text-decoration: underline;
                margin-bottom: 15px;
            }
        }

        >.price{
            width: 557px;
            height: 157px;
            background-image: url(../img/price_bg.png);
            background-size: 100% 100%;
            margin-bottom: 24px;

            >div:nth-of-type(1){
                width: 100%;
                height: 67px;

                >p{
                    float: left;
                    width: 100px;
                    height: 67px;
                    line-height: 67px;
                    text-indent: 14px;
                    font-size: 14px;
                    color: #666;
                }

                >span{
                    display: block;
                    float: left;
                    color: #D0021B;
                    font-size: 24px;
                    line-height: 67px;
                    font-weight:bold;
                }

                >div{
                    float: left;
                    width:50px;
                    height:18px;
                    background:linear-gradient(224deg,
                        #4966FB 0%,
                        #F52623 100%
                    );
                    border-radius:4px 0px 3px 0px;
                    color: #fff;
                    line-height:18px;
                    font-size:12px;
                    text-align: center;
                    margin-left: 10px;
                    margin-top: 23px;
                }

                >section{
                    float: right;
                    margin-right: 19px;
                    line-height: 69px;
                }
            }

            >div:nth-of-type(2){

                >p{
                    float: left;
                    width: 100px;
                    height: 67px;
                    line-height: 67px;
                    text-indent: 14px;
                    font-size: 14px;
                    color: #666;
                }

                >div{
                    float: left;

                    >div{
                        width: 130px;
                        height: 28px;
                        margin-bottom: 10px;
                        line-height: 28px;
                        color: #666;
                        font-size: 12px;
                        text-align: center;
                        background: #fff;
                    }

                    .discounts{
                        background-image: url(../img/discounts.png);
                        color: #D0021B;
                    }
                }

                >.discounts_message{
                    width: 140px;
                    height: 27px;
                    background-image: url(../img/discounts_message.png);
                    line-height: 27px;
                    color: #fff;
                    text-indent: 18px;
                    margin: 20px 0 0 20px;
                }
            }
        }

        >.remark{

            >div:nth-of-type(1){
                height: 57px;

                >p{
                    float: left;
                    width: 99px;
                    height: 57px;
                    color: #666;
                    font-size: 14px;
                    text-indent: 14px;
                }

                >span{
                    display: block;
                    float: left;
                    width: 457px;
                    height: 57px;
                }
            }

            >div:nth-of-type(2){
                height: 40px;
                margin-top: 33px;
                margin-bottom: 32px;

                >p{
                    float: left;
                    width: 99px;
                    height: 40px;
                    line-height: 40px;
                    color: #666;
                    font-size: 14px;
                    text-indent: 14px;
                }

                >div{
                    float: left;

                    >button{
                        display: block;
                        width: 98px;
                        height: 38px;
                        border: 1px solid #CBCBCB;
                        background: #fff;
                        float: left;
                        margin-right: 15px;
                    }

                    >.number{
                        border-color: #F09334;
                    }

                    >div{
                        float: left;
                        width: 118px;
                        height: 32px;
                        margin-top: 4px;
                        background-image: url(../img/message_box.png);
                        background-size: 100% 100%;
                        color: #F5A623;
                        line-height: 32px;
                        text-align: center;
                        text-indent: 5px;
                    }
                }
            }

            >div:nth-of-type(3){
                height: 32px;

                >p{
                    float: left;
                    width: 99px;
                    height: 32px;
                    line-height: 32px;
                    color: #666;
                    font-size: 14px;
                    text-indent: 14px;
                }

                >div{
                    float: left;
                    line-height: 32px;

                    >section{
                        float: left;
                        width: 145px;
                        height: 32px;

                        >input{
                            float: left;
                            width: 32px;
                            height: 32px;
                            border: 1px solid #CBCBCB;
                            background: #F3F3F3;
                            font-size: 24px;
                        }

                        >.text_box{
                            width: 81px;
                            height: 30px;
                            border: 0;
                            border-top: 1px solid #CBCBCB;
                            border-bottom: 1px solid #CBCBCB;
                            text-align: center;
                            font-size: 20px;
                            background: #fff;
                        }
                    }

                    >p{
                        float: left;
                        color: #666;
                        margin-left: 14px;
                    }

                    >span{
                        display: block;
                        float: left;
                        color: #666;
                        font-size: 12px;
                    }

                    >div{
                        float: left;
                        width: 118px;
                        height: 32px;
                        background-image: url(../img/message_box.png);
                        background-size: 100% 100%;
                        color: #F5A623;
                        line-height: 32px;
                        text-align: center;
                        text-indent: 5px;
                    }
                }
            }
        }

        >.btn{
            margin-top: 49px;
            margin-bottom: 47px;
            .gwc-c{
                width: 600px;
                height: 360px;
                text-align: center;
                position: fixed;
                top:50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background: #fff;
                img{
                    margin: 96px auto 8px;
                }
                >div{
                    margin-top: 66px;
                >div:nth-of-type(1){
                    width: 100px;
                    height: 40px;
                    line-height: 40px;
                    margin-right: 16px;
                    background: rgba(19, 71, 157, 1);
                }
                >div:nth-of-type(2){
                    width: 112px;
                    height: 40px;
                    color: rgba(249, 160, 70, 1);
                    line-height: 40px;
                    border: 1px solid rgba(249, 160, 70, 1);
                }
            }
            }
            >button{
                width: 150px;
                height: 57px;
                border: 0;
                color: #fff;
                font-size: 18px;
                line-height: 57px;
                margin-right: 24px;
                cursor: pointer;
            }

            >button:nth-of-type(1){
                background: #F09334;
            }

            >button:nth-of-type(2){
                background:linear-gradient(135deg,
                #2B7DCC 0%,
                #13479D 100%
                );
            }
        }

        >.property{
            
            >div{
                float: left;
                width: 85px;
                height: 85px;
                border-radius: 50%;
                border: 1px solid #E19F34;
                text-align: center;
                margin: 0 24px;

                >p{
                    margin-top: 24px;
                    color: #666666;
                }
            }
        }
    }
}

.comment{
    width: 1200px;
    margin: 0 auto;
    margin-bottom: 90px;
    display: flex;
    justify-content: space-between;

    >.left{
        width: 206px;

        >div{
            border: 1px solid #DBDBDB;
            margin-bottom: 24px;

            >.title{
                width: 204px;
                height: 48px;
                border-bottom: 1px solid #DBDBDB;
                background: #F3F3F3;
                font-size: 16px;
                font-weight:bold;
                line-height: 48px;
                text-indent: 23px;
            }
        }

        >.store{
            
            >.body{

                >div{
                    padding: 20px 0;
                    height: 20px;
                    text-align: center;

                    >p{
                        display: inline-block;
                    }

                    >a{
                        display: inline-block;

                        >img{
                            margin-left: 10px;
                            width: 20px;
                            height: 20px;
                        }
                    }
                }

                >button{
                    display: block;
                    width:83px;
                    height:28px;
                    background:#F3F3F3;
                    border-radius:2px;
                    border:1px solid #979797;
                    color: #666666;
                    line-height: 28px;
                    font-size: 13px;
                    margin: 0 auto;
                    margin-bottom: 20px;

                    >img{
                        display: inline-block;
                        margin-bottom: 5px;
                        margin-right: 2px;
                        line-height: 28px;
                    }
                }
            }
        }

        >.classify{
            
            >.body{
                padding: 12px 0;

                >p{
                    margin: 12px 0;
                    text-indent: 23px;
                    font-size: 14px;
                }
            }
        }

        >.more{
            margin-bottom: 90px;

            >.body{
                padding-bottom: 30px;

                >div{
                    margin-top: 24px;
                    
                    >img{
                        width: 170px;
                        height: 170px;
                        background: red;
                        margin-left: 18px;
                    }

                    >p{
                        line-height:19px;
                        text-indent: 18px;
                        margin: 8px 0;
                    }

                    >span{
                        display: block;
                        color: #D0021B;
                        line-height:19px;
                        text-indent: 18px;
                    }
                }
            }
        }
    }

    >.right{
        width: 968px;
        border: 1px solid #DBDBDB;

        >.title{
            width: 968px;
            height: 50px;
            background: #F3F3F3;

            >div{
                float: left;
                width: 160px;
                height: 47px;
                line-height: 50px;
                text-align: center;
            }
        
            >.title1{
                border-top: 3px solid #D0021B;
                color: #D0021B;
                font-weight:bold;
                background: #fff;
            }

            >.title2{
                border-top: 3px solid #D0021B;
                color: #D0021B;
                font-weight:bold;
                background: #fff;
            }

            >.title3{
                border-top: 3px solid #2877C7;
                color: #2877C7;
                font-weight:bold;
                background: #fff;
            }

            .action{
                color: #666666;
                height: 50px;
                border: none;
                background: #F3F3F3;
            }
        }

        >.body1{
            width: 968px;

            >div{
                width: 938px;
                margin: 0 auto;
                border-bottom: 1px solid #DBDBDB;
                display: flex;

                >dl{
                    float: left;
                    width: 33%;
                    height: 129px;
                    padding: 28px 0;

                    >dt{
                        width: 50%;
                        height: 43px;
                        float: left;
                        line-height: 43px;
                        text-indent: 53px;
                        color: #666;
                    }

                    >dd{
                        width: 50%;
                        height: 43px;
                        float: left;
                        line-height: 43px;
                    }
                }
            }

            >div:last-of-type{
                border: 0;
            }

            >img{
                width: 968px;
            }
        }

        >.body2{
            width: 968px;
        }

        >.body3{
            width: 968px;

            >div{
                width: 938px;
                margin: 0 auto;
                border-bottom: 1px solid #DBDBDB;

                >.top{
                    height: 145px;
                    
                    >div:nth-of-type(1){
                        width: 122px;
                        height: 100px;
                        float: left;

                        >img{
                            width: 40px;
                            height: 40px;
                            margin: 56px 0 0 52px;
                            border-radius: 50%;
                        }
                    }

                    >div:nth-of-type(2){
                        width: 816px;
                        float: left;

                        >div{
                            height: 16px;
                            line-height: 16px;
                            margin-top: 56px;

                            >i{
                                font-size: 16px;
                                color: #DBDBDB;
                            }

                            >.star{
                                color: #D0021B;
                            }
                        }

                        >p{
                            margin-top: 10px;
                            line-height: 19px;
                        }

                        >span{
                            display: block;
                            margin-top: 12px;
                            color: #999;
                            font-size: 12px;
                        }
                    }
                }

                >.center{
                    height: 180px;
                    margin-left: 122px;
                    margin-bottom: 24px;

                    >img{
                        width: 180px;
                        height: 180px;
                        background: red;
                        margin-right: 20px;
                        float: left;
                    }
                }

                >.bottom{
                    height: 45px;
                    margin-left: 122px;
                    margin-bottom: 40px;

                    >div:nth-of-type(1){
                        float: left;
                        width: 80px;
                        height: 45px;

                        >p{
                            margin-bottom: 10px;
                            color: #666;
                            white-space: nowrap;
                            text-indent: -5px;
                        }

                        >span{
                            color: #999;
                            font-size: 12px;
                        }
                    }

                    >div:nth-of-type(2){
                        float: left;
                        width: 736px;
                        height: 45px;
                    }
                }
            }

            >div:last-of-type{
                border: 0;
            }

            >section{
                margin: 0 !important;
            }
        }
    }
}








.recommend{
    margin-bottom: 111px;

    .title{
        background: red;
        width: 1200px;
        height: 48px;
        margin: 0 auto;
        background: #F3F3F3;
        margin-bottom: 32px;

        >.left{
            float: left;
            font-size: 20px;
            line-height: 48px;
            margin-left: 17px;

            >img{
                display: inline-block;
                margin-bottom: 5px;
                width: 21px;
                height: 20px;
            }
        }

        >.right{
            float: right;
            font-size: 16px;
            line-height: 48px;
            margin-right: 24px;
        }
    }

    .body{
        width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;

        >div{
            width: 280px;
            height: 406px;

            >img{
                display: block;
                width: 280px;
                height: 280px;
            }

            >div{
                width: 246px;
                height: 96px;
                border: 1px solid #DBDBDB;
                border-top: 0;
                padding: 15px 16px;
                position: relative;

                >p{
                    height: 21px;
                    font-size: 16px;
                    color: #333;
                }

                >span{
                    display: block;
                    margin: 16px 0;
                    height: 19px;
                    font-size: 14px;
                    color: #666666;
                }

                >div{
                    height: 21px;
                    font-size: 16px;
                    color: #D0021B;
                }

                >section{
                    position: absolute;
                    width: 58px;
                    height: 32px;
                    right: -1px;
                    top: 10px;
                    background-image: url(../img/shopping_car_p1.png);
                    background-size: 100% 100%;
                    color: #fff;
                    text-indent: 5px;
                    font-size: 14px;
                    line-height: 32px;
                    text-align: center;
                }
            }
        }
    }
}